<template>
	<view class="fusion">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">合成</view>
			</template>
		</uv-navbar>
		<view class="content">
			<uv-swiper :list="swiper" keyName="img" height="150" imgMode="scaleToFill"></uv-swiper>
			<view class="tabs">
				<view class="item" :class="active==1?'active':''" @click="changeActive(1)">进行中</view>
				<view class="item" :class="active==2?'active':''" @click="changeActive(2)">未开始</view>
				<view class="item" :class="active==3?'active':''" @click="changeActive(3)">已结束</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in _this.list" @click="navigate(item.id)">
					<view class="label" v-if="active==1">进行中</view>
					<view class="label" v-else-if="active==2">未开始</view>
					<view class="label" v-else>已结束</view>
					<view class="cover">
						<image :src="item.cover"></image>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="cell">
						<image src="@/static/images/15.png"></image>
						<view class="value">{{item.start_date}}-{{item.end_date}}</view>
					</view>
				</view>
				<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		composeLists
	} from "@/request/api";
	import {
		onShow,
		onHide,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();

	const swiper = ref([]);

	const active = ref(1);
	const getList = async () => {
		let {
			rotation,
			list
		} = await composeLists({
			status: active.value,
			page: _this.page,
			limit: _this.limit,
		});
		swiper.value = rotation;
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};

	const changeActive = (value) => {
		active.value = value;
		_this.page = 1;
		_this.list = [];
		getList();
	};
	const navigate = (id) => {
		if (active.value != 1) return;
		router(`/pages/home/fusion_deta?id=${id}`)
	};

	onShow(() => getList());
	onHide(() => {
		_this.page = 1;
		_this.list = [];
	});
	onReachBottom(() => loadmore());
</script>

<style scoped lang="scss">
	.fusion {
		.center_slot {
			color: #FFFFFF;
			font-size: 18px;
			font-weight: bold;
		}

		.content {
			padding: 0 20rpx;
			box-sizing: border-box;

			.tabs {
				padding: 30rpx 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.item {
					width: 210rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					color: #808080;
					font-size: 28rpx;
					border-radius: 10rpx;
					background: #202020;

					&.active {
						color: #111111;
						background: #DDF247;
					}
				}
			}

			.list {
				padding: 0 30rpx;
				box-sizing: border-box;

				.item {
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					background: #2E2E2E;
					position: relative;

					.label {
						width: 110rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						color: #000000;
						font-size: 24rpx;
						border-radius: 20rpx 0rpx 0rpx 20rpx;
						background: #DDF247;
						position: absolute;
						top: 40rpx;
						right: 0;
						z-index: 2;
					}

					.cover {
						width: 100%;
						height: 650rpx;
						position: relative;

						image {
							width: 100%;
							height: 650rpx;
							border-radius: 12rpx;
						}

						.name {
							width: 100%;
							height: 100rpx;
							line-height: 100rpx;
							color: #FFFFFF;
							font-size: 32rpx;
							font-weight: 800;
							padding-left: 30rpx;
							box-sizing: border-box;
							background: url(@/static/images/14.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							left: 0;
							bottom: 0;
							z-index: 2;
						}
					}

					.cell {
						padding-top: 25rpx;
						padding-bottom: 10rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						.value {
							color: #DDF247;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>